<template>
  <div>
    <el-card>
      <el-row type="flex">
        <el-col>
          <el-button type="primary" @click="isShow=true ">添加页面</el-button>
        </el-col>
        <el-col>
          <el-row type="flex">
            <el-input v-model="nameInput" placeholder="请输入关键字" />
            <el-button @click="submitSearch">筛选</el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- 分割线 -->

      <!-- 表格 -->
      <el-table ref="form" border :data="pagesList" @close="closeFn">
        <el-table-column label="标题" prop="title" />
        <el-table-column label="内容" prop="content">
          <template v-slot="{row}">
            <p v-html="row.content" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-col>
              <el-row type="flex">
                <el-button type="primary" size="small" @click="editPage(row.id)">编辑</el-button>
                <el-button type="danger" size="small" @click="delPage(row.id)">删除</el-button>
              </el-row>
            </el-col>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器  -->
      <el-row type="flex" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="pageConfig._limit"
          @current-change="currentChange"
        />
      </el-row>

    </el-card>
    <!-- 添加页面弹窗 -->
    <!-- 抽屉组件 -->
    <el-drawer
      title="添加内容"
      :visible.sync="isShow"
      @close="closeFn"
    >
      <el-form ref="form" :model="formData" :rules="rules">
        <el-form-item label="标题" label-width="15%" prop="title">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item label="内容" label-width="15%" prop="content">
          <!-- 富文本 -->
          <quillEditor v-model="formData.content" @blur="$refs.form.validateField('content')" />
        </el-form-item>
        <el-col>
          <el-form>
            <el-row type="flex" justify="center">
              <el-button type="primary" size="small" @click="submit">确定</el-button>
              <el-button size="small" @click="closeFn">取消</el-button>
            </el-row>
          </el-form>
        </el-col>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { getPagesList, delPagesList, addPagesList, editPagesList, getPageListDetail, getPageCount } from '@/api/pages'
import { quillEditor } from 'vue-quill-editor'
// 富文本引入
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  // 3.在项目中挂载
  components: { quillEditor },
  data() {
    return {
      // 保存表格数据
      pagesList: [],
      // 弹窗
      isShow: false,
      formData: {
        title: '',
        content: ''
      },
      // 分页参数
      pageConfig: {
        _limit: 5,
        _start: 0
        // title_contains: ''
      },
      // 页码
      page: 1,
      total: 0,
      // 筛选
      nameInput: '',
      // 效验
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    // 获取页面列表数据
    this.getPagesList()
    // 获取分页数量
    this.getPageCount()
  },

  methods: {
    // 搜素栏
    submitSearch() {
      // 发送请求拿数据
      // 获取数据
      this.getPagesList()
      // 获取数量
      this.getPageCount()
    },
    // 获取页面列表
    async getPagesList() {
      const { data } = await getPagesList({
        ...this.pageConfig,
        // 获取数据带上用户搜索条件
        title_contains: this.nameInput || null
      })
      // console.log(45, res)
      // 保存列表数据
      this.pagesList = data
    },
    // 获取分页数量
    async getPageCount() {
      const { data } = await getPageCount({
        // 分页优化
        title_contains: this.nameInput || null
      })
      this.total = data
    },
    currentChange(newPage) {
      // console.log(123)
      this.page = newPage
      // console.log(this.page)
      // 当前下标等于上一页最后下标的下一个，把页码减一，乘每页条数
      this.pageConfig._start = (this.page - 1) * this.pageConfig._limit
      // 更新页面
      this.getPagesList()
    },

    // 新增页面
    async submit() {
      // console.log(123)
      await this.$refs.form.validate()
      // 条件判断，是新增还是编辑
      if (this.formData.id) {
        //  效验通过，调用编辑接口
        await editPagesList(this.formData)
        // 成功，刷新列表
        this.getPagesList()
      } else {
        // 调用新增接口
        await addPagesList(this.formData)
        this.getPagesList()
      }
      // 关闭弹窗
      this.closeFn()
      // 提示信息
      this.$message.success('操作成功')
    },
    closeFn() {
      // 关闭弹窗
      this.isShow = false
      this.formData = {
        title: '',
        content: ''
      }
      this.$refs.form.resetFields()
    },
    // 删除页面
    delPage(id) {
      // console.log(123)
      this.$confirm('确定要删除吗', '提示', {
        type: 'warning'
      }).then(async() => {
        await delPagesList(id)

        // 更新列表
        // 直接调用接口,this.getPagesList不用this
        this.getPagesList()
      }).catch(err => {
        console.log('点击取消按钮或代码报错', err)
      })
    },
    // 编辑页面
    async editPage(id) {
      // 数据回显
      const res = await getPageListDetail(id)
      this.formData = res.data
      // console.log(171, this.formData)
      // console.log(163, res)
      // 打开弹窗
      this.isShow = true
    }

  }
}
</script>

<style scoped lang="scss">

 .el-table{
   margin-top: 20px;
 }
 .Editor{
   margin-top: 10px;
 }

</style>
